<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>汇总</title>
<%@ include file="/common/header/meta.jsp"%>
<%@ include file="/common/header/script.jsp"%>
<style type="text/css">
#view{
	margin:0 auto;
	width: 80%;
	min-width: 880px;
}
#container{
	margin:0 auto;
	width: 80%;
	min-width: 880px;
}
#container2{
	margin:0 auto;
	width: 80%;
	min-width: 880px;
}
#view table, #bar table {
	margin:10px auto;
	box-shadow: 0px 0px 50px #a7a8ad;
	    
}
#view table, #bar table{border-collapse:collapse;width:880px;margin:10px auto;}
#view table th,#bar table th{background:#F2F7FE;padding:3px;border:1px solid #B8CCE2;padding-left:5px;color:#333;height:24px;text-align:center;}
#view table td,#bar table td{padding:2px;border:1px solid #B8CCE2;color:#333;height:24px;text-align:center;}
#view table th.dept{
	text-align: left;
	background: #147DC1;
	border:1px solid #0A75BB;
	color:#fff; 
}
#view table th.row2{
	text-align: left;
}
#view table td.category{
	text-align: left;
}
.curMonth1{background: #DDDDDD;}
.curMonth2{background: #F0FFF0;}
.curMonth{background: #55BF3B;}
</style>
<script type="text/javascript">
	var currentYear = $.date.format(new Date(), "yyyy");
	var currentMonth = $.date.format(new Date(), "MM");
	$(function() {
		$("#sy").combobox({
			valueField: 'label', textField: 'value', value: currentYear,
			data: [
			       { label: '2013', value: '2013' },{ label: '2014', value: '2014' },{ label: '2015', value: '2015' },
			       { label: '2016', value: '2016' },{ label: '2017', value: '2017' },{ label: '2018', value: '2018' },
			       { label: '2019', value: '2019' },{ label: '2020', value: '2020' },{ label: '2021', value: '2021' },
			],
			panelHeight:'auto', editable:false, autoShowPanel: true,
			onSelect: function() {
				allDeptList();
			}
		}) ;
		
		allDeptList();
	});
	function allDeptList() {
		$.easyui.loading({ msg: "数据提交中，请稍等..." });
		var searchYear = $("#submitForm").form("getData").searchYear ;//获取查询年份
		
		
		$.get($.webapp.root+"/admin/oa/forecast/doNotNeedAuth_forecast_report.do?year="+searchYear, function(result) {
			
			if(result != null && result.length > 0) {
				$("#view").empty();
				var table = $("<table></table>");
				
				var thead_tr1 = $("<tr></tr>").appendTo(table);
				$("<th class='dept'></th>").attr("colspan", "13").html("项目别开发人员预定").appendTo(thead_tr1) ;
				
				var thead_tr2 = $("<tr></tr>").appendTo(table);
				$("<th class='row2'></th>").html("名称").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("一月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("二月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("三月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("四月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("五月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("六月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("七月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("八月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("九月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("十月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("十一月").appendTo(thead_tr2);
				$("<th style='width:50px;'></th>").html("十二月").appendTo(thead_tr2);
				
				
				$.each(result, function(i, p){
					var tbody_tr = $("<tr></tr>");
					$("<td class='category'></td>").html(p.category).appendTo(tbody_tr);
					$("<td class='m1'></td>").html(p.m1).appendTo(tbody_tr);
					$("<td class='m2'></td>").html(p.m2).appendTo(tbody_tr);
					$("<td class='m3'></td>").html(p.m3).appendTo(tbody_tr);
					$("<td class='m4'></td>").html(p.m4).appendTo(tbody_tr);
					$("<td class='m5'></td>").html(p.m5).appendTo(tbody_tr);
					$("<td class='m6'></td>").html(p.m6).appendTo(tbody_tr);
					$("<td class='m7'></td>").html(p.m7).appendTo(tbody_tr);
					$("<td class='m8'></td>").html(p.m8).appendTo(tbody_tr);
					$("<td class='m9'></td>").html(p.m9).appendTo(tbody_tr);
					$("<td class='m10'></td>").html(p.m10).appendTo(tbody_tr);
					$("<td class='m11'></td>").html(p.m11).appendTo(tbody_tr);
					$("<td class='m12'></td>").html(p.m12).appendTo(tbody_tr);
					
					tbody_tr.appendTo(table);
					
					$("#view").append(table);
					
				});
				
				//设置单元格背景
				var c = parseInt(currentMonth) ;
				$(".m"+c).addClass("curMonth");
				for(var i=c; i>=1; i--) {
					$(".m"+i).addClass("curMonth1");
				}
				for(var i=c; i<=12; i++) {
					$(".m"+i).addClass("curMonth2");
				}
			} else {
				$.easyui.loaded();$.messager.alert("提示", "无"+searchYear+"年份的数据", "info");
			}
			$.easyui.loaded();
			
			
			if(result != null && result.length > 0) {
				var pjxq_result = result[7] ;
				var pjkx_result = result[10] ;
				
				var pjxq = [pjxq_result.m1, pjxq_result.m2, pjxq_result.m3, pjxq_result.m4, pjxq_result.m5, pjxq_result.m6, pjxq_result.m7, pjxq_result.m8, pjxq_result.m9, pjxq_result.m10, pjxq_result.m11, pjxq_result.m12] ;
				var pjkx = [pjkx_result.m1, pjkx_result.m2, pjkx_result.m3, pjkx_result.m4, pjkx_result.m5, pjkx_result.m6, pjkx_result.m7, pjkx_result.m8, pjkx_result.m9, pjkx_result.m10, pjkx_result.m11, pjkx_result.m12] ;
				
				var data = [{
		            name: '需求平均（人）',
		            data: pjxq
		        }, {
		            name: '空闲平均（人）',
		            data: pjkx
		        }];
				options.title.text = "项目别开发人员预定趋势图" +"（"+$("#submitForm").form("getData").searchYear + "）" ;
				options["series"] = data ;
				chart = new Highcharts.Chart(options);
			}
			
			
		}, "json").error(function(){$.easyui.loaded();});;
	}
	
	var options = {
			chart: {
	            type: 'line',
	            renderTo:'container'
	        },
	        title: {
	            text: '-'
	        },
	        xAxis: {
	            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
	        },
	        yAxis: {
	            title: {
	                text: '开发人员'
	            }
	        },
	        tooltip: {
	            enabled: false,
	            formatter: function() {
	                return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C';
	            }
	        },
	        plotOptions: {
	            line: {
	                dataLabels: {
	                    enabled: true
	                },
	                enableMouseTracking: false
	            }
	        }
		};
</script>
</head>

<body>
	<br/>
	<div id="bar">
		<table>
			<tr>
				<td>
					<form id="submitForm">
						年份 <input id="sy" name="searchYear" style="height:25px; width: 60px;"/>
					</form>
				</td>
			</tr>
		</table>
	</div>
	<div id="view">
	</div>
	
	<div id="container"></div>
	<div id="container2"></div>
	
</body>
</html>